<template>
	<view class="containers">
		<scroll-view scroll-x class="title">
			<view class="box">
				<text class="head-right">
					所有食材
				</text>
				<text class="item" v-for="(item,index) in ingredientTag" :key='index'
					:class="{active:currentActive==index}" @tap='chooseIngredient(index)'>
					{{item}}
				</text>
			</view>
		</scroll-view>

		<view v-if="ingredientList.length">
			<view class="dingdan-msg" :class="{active:flag}">
				<view class="item" v-for="item in detailObj.ingredient" :key='item.name'>
					<text>{{item.name}}</text>
					<text class="item1">{{item.number}}</text>
				</view>
			</view>
			　　<view class="show-or-noshow" @tap="showTag">
				{{flag?"收起":"展开全部"}}
				<image src="../../static/image/mine/mengbanzu282.png"></image>
			</view>
		</view>
		<view v-else>
			<u-empty text="食材为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				detailObj: {},
				currentActive: 0,
				ingredientTag: []
			}
		},
		props: ['ingredientList'],
		watch: {
			ingredientList: {
				immediate:true,
				handler(a, b) {
					if(!a) return
					// console.log('组件');
					console.log(a, b);
					if (a.length != 0) {
						this.getMenuDetail({
							_id: a[0]
						})
					}
					this.ingredientTag = []
					a.forEach(v => {
						this.$api.search.getMenuDetail({
							_id: v
						}).then(res => {
							this.ingredientTag.push(res.message[0].name)
						})
					})
				},
				deep: true
			},

			// ingredientList(a, b) {

			// }
		},
		methods: {
			showTag() {
				this.flag = !this.flag
			},
			getMenuDetail(data) {
				this.$api.search.getMenuDetail(data).then(res => {
					// console.log(res.message[0])
					this.detailObj = res.message[0]
				})
			},
			chooseIngredient(index) {
				this.currentActive = index
				// console.log(this.ingredientList[index])
				this.getMenuDetail({
					_id: this.ingredientList[index]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		.title {
			line-height: 66rpx;
			border-bottom: 1rpx solid #f6f7f8;
			font-size: 24rpx;
			width: 100vw;

			.box {
				display: flex;

				.head-right {
					margin-right: 36rpx;
					height: 66rpx;
					flex-shrink: 0;
				}

				.item {
					margin-right: 36rpx;
					flex-shrink: 0;

					&.active {
						font-size: 30rpx;
						color: #fa846e;
					}
				}
			}


		}

		.dingdan-msg {
			height: 370rpx;
			overflow: hidden;
			line-height: 30rpx;

			.item {

				line-height: 72rpx;
				border-bottom: 1rpx solid #f6f7f8;
				display: flex;
				justify-content: space-between;

				.item1 {
					margin-right: 130rpx;
				}
			}

			&.active {
				height: auto;
				overflow: visible;
			}
		}

		.show-or-noshow {
			margin-top: 10rpx;
			text-align: center;
			height: 25rpx;
			font-size: 24rpx;

			image {
				margin-left: 10rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
</style>
